<p><button id="button-modal-simple-content" type="button" data-target="modal-simple-content" class="tlp-button-primary">Open simple modal</button></p>
<p><button id="button-modal-big-actions" type="button" data-target="modal-big-actions" class="tlp-button-primary">Open modal with big action buttons</button></p>
<p><button id="button-modal-big-content" type="button" data-target="modal-big-content" class="tlp-button-primary">Open modal with big content</button></p>

<div id="modal-simple-content" class="tlp-modal" role="dialog" aria-labelledby="modal-simple-content-label">
      <div class="tlp-modal-header">
          <h1 class="tlp-modal-title" id="modal-simple-content-label">Modal title</h1>
          <div class="tlp-modal-close" data-dismiss="modal" aria-label="Close">
              &times;
          </div>
      </div>
      <div class="tlp-modal-body">
          <h2 class="tlp-modal-subtitle">Subtitle</h2>
          <p>One fine body…</p>
      </div>
      <div class="tlp-modal-footer">
          <button type="button" class="tlp-button-primary tlp-button-outline tlp-modal-action" data-dismiss="modal">Cancel</button>
          <button type="button" class="tlp-button-primary tlp-modal-action">Action</button>
      </div>
</div>

<div id="modal-big-actions" class="tlp-modal" role="dialog" aria-labelledby="modal-big-actions-label">
      <div class="tlp-modal-header">
          <h1 class="tlp-modal-title" id="modal-big-actions-label">Modal title</h1>
          <div class="tlp-modal-close" data-dismiss="modal" aria-label="Close">
              &times;
          </div>
      </div>
      <div class="tlp-modal-body">
          <h2 class="tlp-modal-subtitle">Subtitle</h2>
          <p>One fine body…</p>
      </div>
      <div class="tlp-modal-footer tlp-modal-footer-large">
          <button type="button" class="tlp-button-primary tlp-button-large tlp-button-outline tlp-modal-action" data-dismiss="modal">Cancel</button>
          <button type="button" class="tlp-button-primary tlp-button-large tlp-modal-action">Action</button>
      </div>
</div>

<div id="modal-big-content" class="tlp-modal" role="dialog" aria-labelledby="modal-big-content-label">
      <div class="tlp-modal-header">
          <h1 class="tlp-modal-title" id="modal-big-content-label">Modal title</h1>
          <div class="tlp-modal-close" data-dismiss="modal" aria-label="Close">
              &times;
          </div>
      </div>
      <div class="tlp-modal-body">
          <h2 class="tlp-modal-subtitle">Pellentesque ullamcorper sagittis luctus</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper congue. Praesent vulputate tortor elementum, condimentum enim at, pharetra tortor. Curabitur vitae laoreet nibh, sed fermentum erat. Sed non consectetur augue, nec efficitur dui. Mauris eleifend non turpis sed pretium. Aenean facilisis nec mauris vitae feugiat. Fusce eu tortor sit amet nulla sagittis ornare vel vitae nisi. Fusce nisl lacus, varius dapibus augue eu, elementum aliquet est. Nam euismod tristique diam pretium auctor. Quisque scelerisque ornare tellus, et faucibus risus pulvinar vel. Fusce pellentesque fermentum sapien id bibendum. Nam nibh turpis, gravida et ipsum quis, tempus posuere nisl. Phasellus id pretium felis, ac auctor purus.</p>
          <ul>
              <li>Pellentesque mollis risus a dignissim interdum.</li>
              <li>Nunc gravida nisl vitae felis feugiat congue.</li>
              <li>Sed accumsan purus eu nibh cursus, eu viverra nisi finibus.</li>
              <li>Morbi ut ante sit amet risus vehicula faucibus.</li>
          </ul>
          <p class="tlp-text-success"><i class="fa fa-space-shuttle"></i> Integer et ullamcorper mauris. Duis.</p>
          <p>Proin vitae vulputate metus. Nullam interdum vehicula enim, quis luctus nisi sodales a. Pellentesque id sem ut orci ultricies eleifend. In nec posuere ipsum. Sed eget nunc sed magna euismod laoreet. Vestibulum congue nisi augue, in varius turpis elementum et. Cras eu rhoncus lectus, at tincidunt ante.</p>
          <p>Fusce massa arcu, congue ut mauris vel, dignissim euismod orci. Nunc imperdiet pharetra dui, quis consequat nisl imperdiet et. Aenean eget varius mi, et consequat metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam porta diam a elit finibus vehicula. Praesent ut ultricies quam. Pellentesque ut ipsum id tellus venenatis sagittis ut eu velit. Morbi non sapien finibus, vehicula massa sed, rutrum ipsum. Nam vestibulum augue sit amet mauris volutpat rhoncus. Aliquam eu dapibus massa. Cras elementum massa massa.</p>
      </div>
      <div class="tlp-modal-footer">
          <button type="button" class="tlp-button-primary tlp-button-outline tlp-modal-action" data-dismiss="modal">Cancel</button>
          <button type="button" class="tlp-button-primary tlp-modal-action">Action</button>
      </div>
</div>

<script>
    var modal_element        = document.getElementById('modal-simple-content');
    var modal_simple_content = tlp.modal(modal_element);

    modal_simple_content.addEventListener('tlp-modal-shown', callback);
    modal_simple_content.addEventListener('tlp-modal-hidden', callback);
    modal_simple_content.removeEventListener('tlp-modal-hidden', callback);

    function callback(event) {
        // Do something...
    }

    document.getElementById('button-modal-simple-content').addEventListener('click', function () {
        modal_simple_content.toggle();
    });
</script>
